<!--
 * @userName: 湫之恋
 * @Author: Seven
 * @Date: 2020-07-01 15:38:52
 * @LastEditors: Seven
 * @LastEditTime: 2020-07-02 11:13:53
 -->
<template>
  <div>
    <searchFor></searchFor>
    <el-table :data="list" border style="width: 1100px;margin: auto">
      <el-table-column
        :show-overflow-tooltip="true"
        fixed
        prop="_id"
        align="center"
        label="订单编号"
        width="150"
      ></el-table-column>
      <el-table-column prop="rentId.name" label="出租方" align="center" width="120"></el-table-column>
      <el-table-column prop="hireId.name" label="租赁方" align="center" width="120"></el-table-column>
      <el-table-column prop="carId.carname" label="汽车名" align="center" width="120"></el-table-column>
      <el-table-column prop="orderDate" label="交易开始时间" align="center" width="120"></el-table-column>
      <el-table-column prop="finishDate" label="交易结束时间" align="center" width="120"></el-table-column>
       <el-table-column prop="price" label="支付金额" align="center" width="120"></el-table-column>
      <el-table-column prop="orderBool" label="订单状态" align="center" width="120"></el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template scope="scope">
          <el-button type="text" @click="removeClick(scope.row._id)" size="small">删除</el-button>
          <el-button type="text" @click="checkClick(scope.row._id)" size="small">查询</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <div class="paginationMain">
        <span @click="firstPage">首页</span>
        <span @click="previous">上一页</span>
        <span @click="mynextPage">下一页</span>
        <span @click="maxPage">尾页</span>
      </div>
    </div>
  </div>
</template>

<script>
const axios = require("axios");
import { createNamespacedHelpers } from "vuex";
let { mapState, mapActions, mapMutations } = createNamespacedHelpers("order");
import searchFor from "./searchFor/searchFor";
export default {
  components: {
    searchFor
  },
  created() {
    this.getOrderAsync();
  },
  data() {
    return {};
  },
  computed: {
    ...mapState(["list"])
  },
  methods: {
    ...mapActions(["getOrderAsync"]),
    ...mapMutations(["firstPages", "previouss", "mynextPages", "maxPages"]),
    async removeClick(_id) {
      try {
        const { data } = await axios.post("/order/delOrder", { _id });
        this.getOrderAsync();
        if (data.n) {
          alert(`你删除了${data.n}条数据`);
        } else {
          alert("删除失败");
        }
      } catch (error) {
        alert("删除失败");
      }
    },
    checkClick(_id){
      this.$router.push(`/admin/index/orderDeatil/${_id}`)
    },
    firstPage() {
      this.firstPages();
      this.getOrderAsync();
    },
    previous() {
      this.previouss();
      this.getOrderAsync();
    },
    mynextPage() {
      this.mynextPages();
      this.getOrderAsync();
    },
    maxPage() {
      this.maxPages();
      this.getOrderAsync();
    }
  }
};
</script>

<style>
.el-main[data-v-452a4712] {
  text-align: center !important;
}
.el-table td,
.el-table th {
  text-align: center !important;
}
.pagination .paginationMain {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination .paginationMain span {
  display: block;
  width: 50px;
  height: 30px;
  border: 1px solid #999;
  line-height: 30px;
  text-align: center;
  margin-right: 10px;
  font-size: 14px;
  border-radius: 5px;
  cursor: pointer;
}
.pagination .paginationMain span:hover {
  border: 1px solid #f3a83f;
  color: #f3a83f;
}
</style>